/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/12/15 9:24 上午
 * @version V1.0
 */
import React, { useEffect, useState } from "react";
import { Button, Cascader, Form, Input, message, Modal, Popconfirm, Select, Table } from "antd";
import { createFullTimeExpert, deleteTrainingType, getDepartmentTreeList, getExpertUserModelList } from "api/index";
import styles from "./index.less";
import SectionTitle from "components/SectionTitle";
import AddSomeButton from "components/AddSomeButton";
import { getChildCascader } from "utils/index";

const { Option } = Select;
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 }
};
const Supervision = () => {
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);
    const [visible, setVisible] = useState(false);
    const [treeData, setTreeData] = useState([]);

    const [form] = Form.useForm();
    const fetch = async () => {
        setLoading(true);
        const result = await getExpertUserModelList();
        if (result.status === "success") {
            const dataSource = result.result;
            setDataSource(dataSource);
        } else {
            message.error(result.message);
        }
        setLoading(false);
    };

    const getUnitsTreeData = async () => {
        const result = await getDepartmentTreeList();
        if (result.status === "success") {
            const data = result.result;
            const treeData = data.map(c => {
                if (!c.hasLowerDepartment) {
                    return {
                        value: c.departmentId,
                        label: c.departmentName
                    };
                } else {
                    return {
                        value: c.departmentId,
                        label: c.departmentName,
                        children: getChildCascader(c.lowerDepartmentModel)
                    };
                }
            });
            setTreeData(treeData);
        } else {
            message.error(result.message);
        }
    };
    useEffect(() => {
        fetch();
    }, []);
    const addItem = () => {
        getUnitsTreeData();
        setVisible(true);
    };
    const handleDelete = async ({ trainTypeId }) => {
        const result = await deleteTrainingType({ trainingTypeId: trainTypeId });
        if (result.status === "success") {
            message.success("删除成功");
            fetch();
        } else {
            message.error(result.message);
        }
    };
    const title = "新增督导专家";
    const columns = [
        {
            title: "督导专家姓名",
            dataIndex: "expertRealName",
            align: "left"
        },
        {
            title: "登录账号",
            dataIndex: "loginId",
            align: "left"
        },
        {
            title: "单位",
            dataIndex: "department",
            align: "left"
        },
        {
            title: "学校级教学督导专家",
            align: "left",
            render: (item) => item.schoolSupervisionExpert ? "是" : "否"
        },
        {
            title: "操作",
            align: "left",

            render: (item) => {
                return (
                    <div>
                        <Popconfirm title="是否要删除？" onConfirm={() => handleDelete(item)}>
                            <Button style={{ padding: 2, color: "#C21217", fontWeight: "bold" }} type="link">删除</Button>
                        </Popconfirm>

                    </div>
                );
            }
        }
    ];
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerHeader}>
                <SectionTitle title={title}/>
                <div style={{ width: "220px" }} onClick={() => addItem({})}>
                    <AddSomeButton title={title}/>
                </div>
            </div>
            <div className={styles.pageContainerTable}>
                <SectionTitle title={"已有督导专家"}/>
                <div className={styles.tableContainer}>
                    <Table
                        bordered={false} // 是否有边框
                        rowKey='expertUserId' // 唯一key值
                        loading={loading} // 加载动画
                        columns={columns} // 表头
                        dataSource={dataSource}
                        pagination={false}
                    />
                </div>
            </div>
            <Modal
                title={title}
                visible={visible}
                // width="960px"
                onOk={() => {
                    form.validateFields().then(async values => {
                        values.userRoleType = "Expert";
                        values.schoolSupervisionExpert = values.schoolSupervisionExpert === "1" ? true : false;
                        values.departmentSupervisionExpert = values.departmentSupervisionExpert === "1" ? true : false;
                        values.leastDepartmentId = values.leastDepartmentId.pop();
                        const result = await createFullTimeExpert(values);
                        if (result.status === "success") {
                            setVisible(false);
                            fetch();
                        } else {
                            message.error(result.message);
                        }
                    }).catch(info => {
                        // console.log(info);
                    });
                }}
                onCancel={() => {
                    form.resetFields();
                    setVisible(false);
                }}
            >
                <Form
                    {...layout}
                    layout="horizontal"
                    form={form}
                    name="basic"
                    // 表单默认值，只有初始化以及重置时生效 莫用
                    initialValues={{
                        // name: itemData.name
                    }}
                >

                    <Form.Item
                        label="姓名"
                        name="realName"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入姓名"/>
                    </Form.Item>
                    <Form.Item
                        label="账号"
                        name="loginId"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入账号"/>
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入密码"/>
                    </Form.Item>
                    <Form.Item
                        label="职称"
                        name="teacherTitleType"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Select
                            placeholder="请选择职称"
                        >
                            <Option value="professor">教授</Option>
                            <Option value="associate_professor">副教授</Option>
                            <Option value="instructor">讲师</Option>
                            <Option value="assistant">助教</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="部系专家"
                        name="departmentSupervisionExpert"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Select>
                            <Option value="1">是</Option>
                            <Option value="0">否</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="校级督导专家"
                        name="schoolSupervisionExpert"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Select>
                            <Option value="1">是</Option>
                            <Option value="0">否</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="所在单位"
                        name="leastDepartmentId"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Cascader
                            changeOnSelect
                            options={treeData}
                            placeholder="请选择所在单位"
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default Supervision;
